<!--
 * @Author: H.
 * @Date: 2021-11-29 18:57:18
 * @LastEditTime: 2021-12-08 10:35:56
 * @Description:
-->
<template>
  <div class="login">
    <div class="login-container">
      <div class="login-left">
        <login-left />
      </div>
      <div class="login-account">
        <login-account />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import LoginLeft from './components/login-left.vue'
import loginAccount from './components/login-account.vue'
export default defineComponent({
  setup() {
    return {}
  },
  components: {
    loginAccount,
    LoginLeft
  }
})
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 98vh;
  position: relative;
  .login-left,
  .login-account {
    width: 50%;
  }
  .login-left {
    display: flex;
    justify-content: center;
  }
}
.login:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-left: -48%;
  background-image: url('../../assets/svg/login-bg.svg');
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  content: '';
}
</style>
